<template>
  <div class="page-section" :id="pageName">
    <slot />
  </div>
</template>

<script>
import { decamelize } from '../../utils';

export default {
  name: 'page',
  computed: {
    pageName() {
      const name = this.$route.name;
      if (name) {
        return `page-${decamelize(name)}`;
      }
      return '';
    },
  },
};
</script>

<style lang="less">
.page-section {
  position: relative;
}
</style>
